$(() => {
  // 所有文章类别请求ajax 请求
  function init() {
    $.ajax({
      type: "get",
      url: bignews.category_list,
      success: function (res) {
        const result = template('category', res)
        console.log(res);
        $('tbody').html(result)

      }
    });
  }
  init()

  // 封装函数
  function oreration(url, data) {
    $.ajax({
      type: "post",
      url,
      data: data,
      success: function (res) {
        console.log(res);
        // 隐藏模态框
        $('.modal').modal('hide')
        // 重置表单
        $('#myForm')[0].reset()
        // 调用函数 渲染到页面
        init()
      }

    })
  }



  // 监听新增按钮点击事件
  $('.btn-primary').on('click', function () {
    // 获取输入添加的内容
    const name = $('#cateName').val()
    const slug = $('#cateSlug').val()

    console.log($(this).text());

    if ($(this).text() == '添加') {
      // 返送ajax 请求
      // 调用封装好的函数
      oreration(bignews.category_add, { name, slug })
      // $.ajax({
      //   type: "post",
      //   url: bignews.category_add,
      //   data: { name, slug },
      //   success: function (res) {
      //     console.log(res);
      //     // 隐藏模态框
      //     $('.modal').modal('hide')
      //     // 重置表单
      //     $('#myForm')[0].reset()
      //     // 调用函数 渲染到页面
      //     init()
      //   }
      // });
    } else {
      oreration(bignews.category_edit, { name, slug, id: $('#cateId').val() })
      // $.ajax({
      //   type: "post",
      //   url: bignews.category_edit,
      //   data: { name, slug, id: $('#cateId').val() },
      //   success: function (res) {
      //     console.log(res);
      //     // 隐藏模态框
      //     $('.modal').modal('hide')
      //     // 重置表单
      //     $('#myForm')[0].reset()
      //     // 调用函数 渲染到页面
      //     init()
      //   }
      // });
    }

  })

  // 处理删除按钮
  $('tbody').on('click', '#btn-del', function () {
    // 我们在遍历生成分类删除按钮的时候
    // 已经把当前分类的id赋值给自定义属性 data-id
    // 1. 原生获取方式
    // dom.dataset.id
    // 2. jq 获取方法
    // $(this).data('id')
    // $(this).data().id
    console.log('id=', $(this).data('id'));
    // 发送ajax 请求
    $.ajax({
      type: "post",
      url: bignews.category_delete,
      data: {
        // 获取指定义属性的id值
        id: $(this).data('id')
      },
      success: function (res) {
        console.log(res);
        // 如果删除成功 init 重新加载数据
        // 这里删除成功, 响应并非 200
        // 我们希望能够所有匹配到一个模式 2开头的三位数字都算是成功
        // 正则对象, 有一个 test 函数可以校验一个字符串是否符合要求
        const reg = /^2\d{2}$/
        if (reg.test(res.code)) {
          // 删除成功
          // 重新加载页面数据
          init()
        }
      }
    });

  })


  // 处理编辑修改   事件委托
  $('tbody').on('click', '#btn-edit', function () {
    // 修改莫泰框的内容
    $('#myModalLabel').text('编辑分类')
    $('.btn-primary').text('编辑')

    // 储存好的 内容
    $('#cateName').val($(this).data('name'))
    $('#cateSlug').val($(this).data('slug'))
    $('#cateId').val($(this).data('id'))


    // 弹出模态框
    $('.modal').modal('show')

  })

  // 每当我们已知点击编辑的时候 会改变模态框的内容
  // 我们需要每次点击新增的时候应该是最原始状态
  // 每当模态框消失的时候，恢复成原始状态
  $('.modal').on('hidden.bs.modal', function () {
    // 1. 回复标题
    $('#myModalLabel').text('新增分类')
    // 2. 回复按钮
    $('#btn-opt').text('新增')
    // 3. 清空整个表单
    $('#myForm')[0].reset();

  })


})